<template>
  <div class="search-box">
    <div class="input-box">
      <el-input
        v-model="input3"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 60px">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElSelect, ElOption, ElInput } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'

const input3 = ref('')
const select = ref('')
</script>
<style scoped>
.search-box {
  width: 100%;
  height: 80px;
  border: 1px dashed;
  display: flex;
  justify-content: center;
  line-height: 80px;
}
.input-box {
  width: 600px;
  height: auto;
}
</style>
